<template>
  <div id="app">
    <button @click="fn()">点击设置默认值</button>
    <input v-if="fag"
           ref="ip" />
    <div v-color1="pink"
         v-show="fag">{{msg}}</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  },
  // directives用来定义自定义指令
  directives: {
    // color1: {
    //   //bind 页面一加载就会执行
    //   bind (el, binding) {
    //     console.log("-------bind-----el:");
    //     el.style.color = binding.expression;
    //   },
    //   // 只有dom节点的属性或者文本发生变化就会执行
    //   update (el, binding) {
    //     console.log("-------update-----el:");
    //   }
    // }
    //即绑定 bind 又绑定了 update
    color1 (el, binding) {
      console.log("-----------");
    }

  },
  data () {
    return {
      fag: false,
      msg: 'hello'
    }
  },
  updated () {
    this.$refs.ip.value = 'hello'
  },
  methods: {
    fn () {
      if (this.fag) {
        this.fag = false
      } else {
        this.fag = true
      }
      this.$nextTick(() => {
        this.$refs.ip.value = 'helllo'
      })
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
